/*
    Copyright (c) Guangzhou Data Control Network Technology Co., Ltd. All rights reserved.
    Licensed under the MIT License.
    contact:dcdev_founder@foxmail.com
*/
//存储表单初始值
var formdata={
          text1:'',
          text2:'',
          password:'',
          phone:'',
          email:'',
          url:'',
          identity:'',
          bool:'',
          select:'',
          option:'',
          checkbox:'',
          number:'',
          start_date_value:'',
          end_date_value:'',
          fileList:''
        }


function create_layui_input_form(array, outter_class = "", outter_style = "") {
    var html =
        `<div id="app3" class="${outter_class}" style="${outter_style}">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">`;

    array.forEach(element => {
        switch (element.type) {
            case "submit":
                html = html +
                    `
                    <el-form-item class="${element['is_horizontal']?'inline':''}" ${element['hidden'] ? `style="display: none;"` : ''}>
                        <el-button type="primary" @click="submitForm('ruleForm')">${element['submittext']}</el-button>
                        <el-button @click="resetForm('ruleForm')">${element['resettext']}</el-button>
                    </el-form-item>
`
                break;
            case "text":
                element['is_multi_line'] ?(()=>{
                    formdata['text1']=`${element['default_value']}`;
                    html = html +
`
                    <el-form-item class="${element['is_horizontal']?'inline':''}" label="${element['title']}" prop="text1" ${element['hidden'] ? `style="display: none;"` : ''}
                        :rules="[
                              { required: ${element['is_require'] ?true:false}, message: '请输入', trigger: 'blur' },
            { min: ${element['min_value']}, max: ${element['max_value']}, message: '长度在 ${element['min_value']} 到 ${element['max_value']} 个字符', trigger: 'blur' }
                        ]"
                    >
                        <el-input name="${element['column_name']}" type="textarea" v-model="ruleForm.text1"  placeholder="${element['place_holder']}"></el-input>
                    </el-form-item>
`
                })()
                     :
            (()=>{
                        formdata['text2']=`${element['default_value']}`;

html = html +
`
                    <el-form-item class="${element['is_horizontal']?'inline':''}" label="${element['title']}" prop="text2" ${element['hidden'] ? `style="display: none;"` : ''}
                    :rules="[
                              { required: ${element['is_require'] ?true:false}, message: '请输入', trigger: 'blur' },
                { min: ${element['min_value']}, max: ${element['max_value']}, message: '长度在 ${element['min_value']} 到 ${element['max_value']} 个字符', trigger: 'blur' }
                        ]"
                    >
                        <el-input name="${element['column_name']}" v-model="ruleForm.text2" placeholder="${element['place_holder']}"></el-input>
                    </el-form-item>
`
})()
                    
                break;
            case "password":
                formdata['password']=`${element['default_value']}`;
                html = html +
`
                <el-form-item class="${element['is_horizontal']?'inline':''}" label="${element['title']}" prop="password" ${element['hidden'] ? `style="display: none;"` : ''}
                    :rules="[
                            { required: ${element['is_require'] ?true:false}, message: '请输入', trigger: 'blur' },
                            { min: ${element['min_value']}, max: ${element['max_value']}, message: '长度在 ${element['min_value']} 到 ${element['max_value']} 个字符', trigger: 'blur' }
                        ]"
                >
                    <el-input name="${element['column_name']}" type="password" v-model="ruleForm.password" autocomplete="off" placeholder="${element['place_holder']}"></el-input>
                </el-form-item>

`
                break;
            case "phone":
                formdata['phone']=`${element['default_value']}`;

html = html +
`
                    <el-form-item class="${element['is_horizontal']?'inline':''}" label="${element['title']}" prop="phone" ${element['hidden'] ? `style="display: none;"` : ''}
                    :rules="[
                            { required: ${element['is_require'] ?true:false}, message: '请输入', trigger: 'blur' },
                            {pattern: ${/^1[3456789]\d{9}$/}, message: '目前只支持中国大陆的手机号码', trigger: 'blur'},
                            { min: ${element['min_value']}, max: ${element['max_value']}, message: '长度在 ${element['min_value']} 到 ${element['max_value']} 个字符', trigger: 'blur' }
                        ]"
                    >
                        <el-input  name="${element['column_name']}" v-model="ruleForm.phone" placeholder="${element['place_holder']}"></el-input>
                    </el-form-item>
`
                break;
            case "email":
                formdata['email']=`${element['default_value']}`;
                html = html +
`
                    <el-form-item class="${element['is_horizontal']?'inline':''}" label="${element['title']}" prop="email" ${element['hidden'] ? `style="display: none;"` : ''}
                    :rules="[
                            { required: ${element['is_require'] ?true:false}, message: '请输入', trigger: 'blur' },
                            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
                            { min: ${element['min_value']}, max: ${element['max_value']}, message: '长度在 ${element['min_value']} 到 ${element['max_value']} 个字符', trigger: 'blur' }
                        ]"
                    >
                        <el-input  name="${element['column_name']}" v-model="ruleForm.email" placeholder="${element['place_holder']}"></el-input>
                    </el-form-item>
`
                break;
            case "url":
                formdata['url']=`${element['default_value']}`;
                html = html +
`
                    <el-form-item class="${element['is_horizontal']?'inline':''}" label="${element['title']}" prop="url" ${element['hidden'] ? `style="display: none;"` : ''}
                    :rules="[
                            { required: ${element['is_require'] ?true:false}, message: '请输入', trigger: 'blur' },
                            { type: 'url', message: '请输入正确url', trigger: ['blur', 'change'] },
                            { min: ${element['min_value']}, max: ${element['max_value']}, message: '长度在 ${element['min_value']} 到 ${element['max_value']} 个字符', trigger: 'blur' }
                        ]"
                    >
                        <el-input  name="${element['column_name']}" v-model="ruleForm.url" placeholder="${element['place_holder']}"></el-input>
                    </el-form-item>
`
                break;
            case "identity":
                formdata['identity']=`${element['default_value']}`;
                html = html +
`
                    <el-form-item class="${element['is_horizontal']?'inline':''}" label="${element['title']}" prop="identity" ${element['hidden'] ? `style="display: none;"` : ''}
                    :rules="[
                            { required: ${element['is_require'] ?true:false}, message: '请输入', trigger: 'blur' },
                            {pattern:${/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/}, message: '你的身份证格式不正确'},
                            { min: ${element['min_value']}, max: ${element['max_value']}, message: '长度在 ${element['min_value']} 到 ${element['max_value']} 个字符', trigger: 'blur' }
                        ]"
                    >
                        <el-input  name="${element['column_name']}" v-model="ruleForm.identity" placeholder="${element['place_holder']}"></el-input>
                    </el-form-item>
`
                break;
            case "bool":
            formdata['bool']=`${element['default_value']}`;
                html = html +
`

            <el-form-item class="${element['is_horizontal']?'inline':''}" label="${element['title']}" ${element['hidden'] ? `style="display: none;"` : ''}
                :rules="[
                            { required: ${element['is_require'] ?true:false}, message: '请输入', trigger: 'blur' }
                        ]"
            >
                <el-switch name="${element['column_name']}" v-model="ruleForm.bool"
                active-text="${element['ttitle']}"
                inactive-text="${element['ftitle']}"
                active-value="${element['tvalue']}"
                inactive-value="${element['fvalue']}"></el-switch>
            </el-form-item>
`
                break;
            case "select":
            formdata['select']=`${element['default_value']}`;
                html = html +
`
            <el-form-item class="${element['is_horizontal']?'inline':''}" prop="select" label="${element['title']}" ${element['hidden'] ? `style="display: none;"` : ''}
                :rules="[
                            { required: ${element['is_require'] ?true:false}, message: '请输入', trigger: 'blur' }
                        ]"
            >
                <el-select name="${element['column_name']}" v-model="ruleForm.select" placeholder="请选择活动区域">
                ${element['options'].map(function (item, i) {
                    return `<el-option label="${item}" value="${item}" title="${element['options_title'][i]}"></el-option>`;
                    }).join('')
                }
                </el-select>
            </el-form-item>
`
                break;
            case "option":
            formdata['option']=`${element['default_value']}`;
                html = html +
`
            <el-form-item class="${element['is_horizontal']?'inline':''}" prop="option" label="${element['title']}" ${element['hidden'] ? `style="display: none;"` : ''}
                :rules="[
                            { required: ${element['is_require'] ?true:false}, message: '请输入', trigger: 'blur' }
                        ]"
            >
                <el-radio-group name="${element['column_name']}" v-model="ruleForm.option">
                 ${element['options'].map(function (item, i) {
                    return ` <el-radio label="${item}" value="${item}" title="${element['options_title'][i]}"></el-radio>`
                    }).join('')}
                  
                </el-radio-group>
            </el-form-item>

`
                 break;
            case "checkbox":
            formdata['checkbox']=`${element['default_value']}`;
                html = html +
`
            <el-form-item class="${element['is_horizontal']?'inline':''}" label="${element['title']}" prop="checkbox" ${element['hidden'] ? `style="display: none;"` : ''}
                :rules="[
                            { required: ${element['is_require'] ?true:false}, message: '请输入', trigger: 'blur' }
                        ]"
            >
                <el-checkbox-group name="${element['column_name']}" v-model="ruleForm.checkbox">
                ${element['options'].map(function (item, i) {
                    return ` <el-checkbox name=${item}  label="${item}"  title="${element['options_title'][i]}"></el-checkbox >`
                    }).join('')}
                  
                </el-checkbox-group>
            </el-form-item>
`
                break;

            case "number":
                formdata['number']=`${element['default_value']}`;
                html = html +
`
                <el-form-item class="${element['is_horizontal']?'inline':''}" label="${element['title']}" prop="number" ${element['hidden'] ? `style="display: none;"` : ''}
                    :rules="[
                            { required: ${element['is_require'] ?true:false}, message: '请输入', trigger: 'blur' },
                            {validator:function(rule,value,callback){
                                if (value < ${element['min_value']} || value >  ${element['max_value']}) {
                            　　　　 callback(new Error('最大值${element['max_value']},最小值${element['min_value']}'));
                            　　} else {
                            　　　　callback();
                            　　}
                            }, trigger: 'blur'}
                        ]"
                >
                    <el-input name="${element['column_name']}" type="number" v-model="ruleForm.number" autocomplete="off" placeholder="${element['unit']}"></el-input>
                </el-form-item>

`
                break;
            case "date":
                formdata['date']=`${element['default_value']}`;
                formdata['start_date_value']=`${new Date(element['start_date_value'].replace(/-/g, '/')).getTime()}`;
                formdata['end_date_value']=`${new Date(element['end_date_value'].replace(/-/g, '/')).getTime()}`;

                        
                html = html +

                    `

                          <el-form-item class="${element['is_horizontal']?'inline':''}" prop="date" label="${element['title']}" ${element['hidden'] ? `style="display: none;"` : ''}>
                            <el-date-picker type="date" v-model="ruleForm.date" style="width: 100%;"
                             placeholder="${element['place_holder']}"
                             :picker-options="pickerOptions"
                             ></el-date-picker>
                          </el-form-item>
                       

`
                break;
            case "image":
                formdata['fileList']=`name:"${element['column_name']}",url:"${element['default_value']}"`;
                html = html +
                    `

                    <el-form-item class="${element['is_horizontal']?'inline':''}" prop="date" label="${element['title']}" ${element['hidden'] ? `style="display: none;"` : ''}>
                            <el-upload
                              class="upload-demo"
                              action="https://jsonplaceholder.typicode.com/posts/"
                              :on-preview="handlePreview"
                              :on-remove="handleRemove"
                              :file-list="ruleForm.fileList"
                              list-type="picture">
                              <el-button size="small" type="primary">点击上传</el-button>
                              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                    </el-form-item>

`
                break;

            case "html":
                html = html + element['html'];
                break;
            default:
                break;
        }
    });
    html += `</el-form></div>`;
    return html;
}

